<template>
  <div class="sub-main-mask-view">
    <div class="mask-select">
      <commonCard title="图层管理" iconName="mask" canClose @close="clickClose">
        <div class="select-mask-card-content" id="cesiumcontain">
          <el-tree
            ref="treeRef"
            class="tree-line"
            icon-class="el-icon-circle-plus-outline"
            :data="layerData.value"
            show-checkbox
      
            node-key="id"
            @check-change="checkChange"
            @node-click="nodeClick"
            :default-checked-keys="[1,4]"
            :props="defaultProps"
          />

          <!-- <el-radio-group v-model="checkRadio" @change="changeValue">
              <el-radio  v-for="item in optionList" :key="item.id" :label="item.id" >
                <div class="select-mask-card-content-check">
                  <div class="select-mask-card-content-label">
                    <span>{{item.label}}</span>
                  </div>
                  <div class="select-mask-card-content-number">
                    <span>{{item.number}}</span>
                  </div>
                </div>
              </el-radio>
          </el-radio-group>
          <el-checkbox-group v-model="checkList"  >
              <el-checkbox v-for="item in optionCheckList" :key="item.id" :label="item.id"  >
                <div class="select-mask-card-content-check">
                  <div class="select-mask-card-content-label">
                    <span>{{item.label}}</span>
                  </div>
                </div>
              </el-checkbox>
          </el-checkbox-group> -->

          <!-- <el-checkbox-group v-model="checkList"  @change="changeValue">
              <el-checkbox v-for="item in optionList" :key="item.id" :label="item.id"  >
                <div class="select-mask-card-content-check">
                  <div class="select-mask-card-content-label">
                    <span>{{item.label}}</span>
                  </div>
                  <div class="select-mask-card-content-number">
                    <span>{{item.number}}</span>
                  </div>
                </div>
              </el-checkbox>
            </el-checkbox-group> -->
        </div>
      </commonCard>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, defineEmits } from "vue";
import { ElTree } from 'element-plus'
import type Node from 'element-plus/es/components/tree/src/model/node'
import commonCard from "@/components/commonCard/index.vue";
import axios from "axios";
import { log } from "console";

const defaultProps = {
  children: "children",
  label: "label",
};

const checkRadio = ref(1);
const layerData = reactive({
  value: [],
});

axios.get("./config/layerTree.json").then((result) => {
  layerData.value = result.data;
  // console.log(layerData.value);
});

const emit = defineEmits(["close"]);
const clickClose = () => {
  emit("close");
};
const treeRef=ref<InstanceType<typeof ElTree>>()

function nodeClick(node: Node) {
  if(node.id==3){
    window.viewer.flyTo(window.viewer.jrism.getLayer("taicangdemo").tileset)
  }
}
function checkChange(data, checked, index) {
  // console.log(data, checked, index);
  
  switch(data.id){
    case 1:
      window.viewer.jrism.getLayer("天地图卫星","name").visible=checked
      // window.viewer.imageryLayers._layers[1].show =checked
      // window.viewer.imageryLayers._layers[2].show =checked
    break;
    case 2:
      window.viewer.jrism.getLayer("天地图电子","name").visible=checked
      // window.viewer.imageryLayers._layers[3].show =checked
      // window.viewer.imageryLayers._layers[4].show =checked
    break;
    case 3:
        window.viewer.jrism.getLayer("taicangdemo").visible=checked
      break;
        case 4:
          window.viewer.dataSources.getByName("myland")[0].show=checked
          window.viewer.dataSources.getByName("mylandpoint")[0].show=checked
      break;
   
    default:
      break;

  }
  // console.log("checkChange", data, checked, index);
}
const checkList = ref([1]);
const optionList = reactive([
  {
    label: "天地图卫星",
    number: 0.8,
    id: 1,
  },
  {
    label: "天地图电子",
    number: 0.5,
    id: 2,
  },
]);
const optionCheckList = reactive([
  {
    label: "三调数据",
    number: 0.8,
    id: 3,
  },
]);

function changeValue(value) {
  // if(value==1){
  window.viewer.imageryLayers._layers[3].show =
    !window.viewer.imageryLayers._layers[3].show;
  window.viewer.imageryLayers._layers[4].show =
    !window.viewer.imageryLayers._layers[4].show;
  window.viewer.imageryLayers._layers[5].show =
    !window.viewer.imageryLayers._layers[5].show;
  window.viewer.imageryLayers._layers[6].show =
    !window.viewer.imageryLayers._layers[6].show;
  // }else{
  //   window.viewer.imageryLayers._layers[0].show=false
  //   window.viewer.imageryLayers._layers[1].show=false
  // }
}
</script>

<style scoped lang="scss">
.sub-main-mask-view {
  position: absolute;
  top: 0;
  .mask-select {
    width: 240px;
    min-height: 286px;
    box-sizing: border-box;
    left: 420px;
    position: absolute;
    pointer-events: auto;
    .tree-line{
      background: transparent; 
      overflow-y:auto;
      padding:10px 0;
      color: white;
      --el-tree-node-hover-bg-color:rgba(64, 158, 255, 0.5)
    }
    .select-mask-card-content {
      margin-top: -4px;
    }
    .select-mask-card-content-check {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 178px;
      .select-mask-card-content-number {
        border: 1px solid rgba(255, 255, 255, 0.5);
        min-width: 24px;
        padding: 2px;
        text-align: center;
      }
    }
  }
}
</style>
